<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>html5-video</title>
	<script src="main.js"></script>
	<style>
		div#wrapper{
			width: 500px;
			height: 200px;
			margin: 100px auto;
		}
		/** 视频宽度100% **/
		div.video_box{
			width: 100%;
			border: 3px solid black;
			position: relative;
			padding-bottom: 56.25%;  /*需要用padding来维持16:9比例,也就是9除以16*/
			height: 0;
		}
		video{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			/*background: transparent url("http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg") 50% 50% no-repeat;
			-webkit-background-size: cover;
			   -moz-background-size: cover;
			     -o-background-size: cover;
			        background-size: cover;*/
		}
		#button_box{
			width: 500px;
			margin: auto;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div class="video_box">
			<video id="myVideo" controls="controls" preload="auto" src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4" poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg"></video>
		</div>
	</div>
	<div id="button_box">
		<!-- <button id="playVideo" onclick="videoPlay()">播放</button> -->
		<input type="text" name="" id="videoFile" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4"><br/>
		<input type="button" value="播放" id="playVideo">
		<input type="button" value="重新播放" id="restart">
		<input type="button" value="前进" id="speed">
		<input type="button" value="后退" id="backward">
		<textarea name="" id="msg" cols="30" rows="10">视频支持格式</textarea>
		<button id="loadVideo">加载</button>
	</div>
</body>
</html>	
	